@font-face {
    font-family: "Source Han Serif";
    src: url("/font/SourceHanSerifCN-Regular.eot"); /* IE9 */
    src: url("/font/SourceHanSerifCN-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("/font/SourceHanSerifCN-Regular.woff") format("woff"), /* chrome、firefox */
    url("/font/SourceHanSerifCN-Regular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("/font/SourceHanSerifCN-Regular.svg#SourceHanSerifCN-Regular") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "Source Han Serif";
    src: url("/font/SourceHanSerifCN-Bold.eot"); /* IE9 */
    src: url("/font/SourceHanSerifCN-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("/font/SourceHanSerifCN-Bold.woff") format("woff"), /* chrome、firefox */
    url("/font/SourceHanSerifCN-Bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("/font/SourceHanSerifCN-Bold.svg#SourceHanSerifCN-Bold") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: bold;
}
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	display: grid;
	grid-template-columns: 100%;
	place-items: center center;
	place-content: center center;
	background: #000;
	font-family: 'Source Han Serif'
}
.wrapper{
	height: 100vh;
	width: 100%;
	display:grid;
	place-items: center center;
	place-content: center center;
	grid-template-columns: repeat(auto-fit, 500px);
	grid-template-rows: repeat(auto-fit, 500px);
	margin-bottom: 0px;
	/*border: 1px solid #fff;*/
}
.footer{height:30px;}
.square
{
	position: relative;
	width: 500px;
	height: 500px;
	display:grid;
	place-items: center center;
	/*border: 1px solid #fff;*/
}
.square span:nth-child(1)
{
	position: absolute;
	background-color: rgba(60,149,102,0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	transition: 0.5s;
	animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1)
{
	border: none;
	background: rgba(235,177,13,0.8);
}
.square span:nth-child(2)
{
	position: absolute;
	background-color: rgba(60,149,102,0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	transition: 0.5s;
	animation: animate2 4s linear infinite;
}
.square:hover span:nth-child(2)
{
	border: none;
	background: rgba(235,177,13,0.8);
}
.square span:nth-child(3)
{
	position: absolute;
	background-color: rgba(60,149,102,0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	transition: 0.5s;
	animation: animate 10s linear infinite;
}
.square:hover span:nth-child(3)
{
	border: none;
	background: rgba(235,177,13,0.8);
}

@keyframes animate
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}

}
@keyframes animate2
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}

}

.content
{
	position: relative;
	padding: 50px 80px;
	color: #fff;
	transition: 0.5s;
	z-index: 1000;
	/*border: 1px solid #fff;*/
}
.content:hover
{
	color: rgba(15, 50, 35, 1);
}
.content2
{
	position: relative;
	text-align: center;
	padding: 20px;
	width: 500px;
	color: #fff;
	z-index: 1000;
	/*border: 1px solid #fff;*/
}
.timer
{
	text-align: right;
	font-size: 50px;
}
.clock
{
	text-align: center;
	font-size: 50px;
}
#sp-date
{
	text-align:center;
	font-size: 43px;
}
#sp-time
{
	text-align:center;
	font-size: 75px;
}